@import 'base.less';

//重置按钮相关样式
@buttonTypes : 'default', 'primary', 'danger', 'info', 'disabled';
@buttonColors : @default, @primary, @danger, @info, @disabled;

.buttonMixin(@type, @color) {
	button[type=@{type}] {
		color: #fff;
		--fz : 32rpx;
		background: @color;
		font-size: var(--fz);
		padding: 24rpx;
		line-height: 1.2;
		box-sizing: border-box;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 0;
		&:hover,
		&:active,
		&:focus,
		&:visited,
		&:focus-within,
		&:focus-visible,
		&:target {
			background-color: @color;
		};
		&::after {
			border: none;
		}
	}

	button[type=@{type}] when (@type='disabled') {
		color: hsla(0, 0%, 100%, .6);
	}
	button[type='default'] {
		color: #000;
	}

	//disabled为特殊样式，type=disabled时，按钮可点击，且具有disabled默认的样式
	button[type=@{type}][disabled] when not (@type='disabled') {
		// background-color: lighten(@color, 20%);
		// color: rgba(0, 0, 0, .3);
		color: #666;
		background: #dadada;
	}
}



.buttonTypesLoop(@index) when(@index <=length(@buttonTypes)) {
	.buttonMixin(extract(@buttonTypes, @index), extract(@buttonColors, @index));
	.buttonTypesLoop(@index + 1);
}

.buttonTypesLoop(1);

button[type='default'] {
	border: 1px solid #e1e1e1;
}

page {
	background: #f1f1f1;
}
view {
	box-sizing: border-box;
}
image {
	display: block;
}